<template>
  <div class="box">
    <Loading v-if="!list.encyclopedia_type" />
    <div v-else>
      <van-nav-bar
        left-arrow
        @click-left='$router.go(-1)'
        :title="list.encyclopedia_type+'介绍'"
        :border="false"
      ></van-nav-bar>
      <section>
        <ul>
          <li>
            <b>项目简介</b>
            <p>{{list.item_intro}}</p>
          </li>
          <li>
            <b>项目特色</b>
            <p>{{list.item_introfeature}}</p>
          </li>
          <li>
            <b>功效</b>
            <p>
              <span v-for="(eff, index) of effect" :key="index">{{eff}}</span>
            </p>
          </li>
          <li>
            <b>效果展示</b>
            <img :src="list.item_show" alt="">
          </li>
        </ul>
      </section>
    </div>
  </div>
</template>

<script>
import Loading from '../../components/loading'
import Vue from 'vue'
import { NavBar, Icon } from 'vant'
import { getMedicalDetail } from '@/api/index'
Vue.use(NavBar)
Vue.use(Icon)
export default {
  data () {
    return {
      list: {},
      effect: [] // 存储功效切割的数据
    }
  },
  components: {
    Loading
  },
  mounted () {
    const encyclopediaType = this.$route.query.encyclopedia_type
    getMedicalDetail({ encyclopedia_type: encyclopediaType }).then(res => {
      this.list = res.data.data[0]
      this.effect = this.list.item_effect.split('|')
    })
  },
  methods: {
    // 收藏事件
    col () {
      this.flag = !this.flag
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .van-icon-arrow-left{
  font-size: 0.22rem;
}
/deep/ .van-icon-arrow-left {
  font-size: 0.22rem;
  color: #171717;
}
/deep/ .van-nav-bar__title {
  font-size: 0.18rem;
  font-weight: bold;
  color: #171717;
}
section {
  flex: 1;
  font-family:PingFang SC;
  font-weight:500;
  ul {
    li{
      display: flex;
      flex-direction: column;
      b{
        margin-top: 0.02rem;
        margin-left: 0.2rem;
        padding-left: 0.045rem;
        border-left: 0.01rem solid #F1ABFA;
        margin-bottom: 0.12rem;
        font-size: 0.15rem;
      }
      p{
        margin: 0 0.25rem 0 0.34rem;
        font-size: 0.1rem;
        color:rgba(102,102,102,1);
        line-height: 0.28rem;
        span{
          margin-right: 0.19rem;
        }
      }
      img {
        margin: 0 0.1rem;
        height: 1.785rem;
        width: 3.55rem;
      }
    }
  }
}
</style>
